<div id = "form-content"  class="frmcontent">
    <div class="ti-tabs">
        <ul class="idTabs">
            <li><a class="selected" id="Tab01" title="DANH SÁCH" href="#Tab-01">TỔNG HỢP DỮ LIỆU</a></li>
        </ul> 
        <div id="Tab-01" class="content" style="display: none;">
            <form id="frmsearch">
              <!-- Tieu chi tim kiem -->
                <div id="frm-search" class="frm">
                    <div>
                        <label class="" for="fromDate">Ngày nhập, Từ ngày</label>
                        <input id="fromDate" name="fromDate" class="normal" type="text" date="isdate" value="01/01/<?= date('Y')?>" onkeyup="DateOnkeyup(this,event)">
                        <label class="lb2" for="toDate">Đến ngày</label>
                        <input id="toDate" name="toDate" class="normal" type="text" date="isdate" value="<?= date('d/m/Y')?>" onkeyup="DateOnkeyup(this,event)">
                        
                    </div>
                </div>
            </form>
                <div id="dsplist"></div>
                <div>
                    <div class="button-left">
                        <input type="button" id="refresh" name="refresh" value="Tìm kiếm" />
                    </div>
                    <div class="button-right">
                        <input type="button" id="printrecord" name="printrecord" value="In" />
                    </div>
                </div>
                <div id="jqxWidget">
                    <div id="jqxgrid"></div>
                </div>

        </div>
    </div>
</div>
<script type="text/javascript">
    var dReceive = new Module_Rop({module: 'module', controller: 'rop'});
    dReceive.initialize();
    var objGrid = $('#jqxgrid');
    var columnsrenderer = function (value) {
        return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
    }
    $(function(){
        $(".idTabs").idTabs();
        // prepare the data
        var theme = 'energyblue';
        $('#listBoxgridpagerlistjqxgrid').remove();
        var source ={
              datatype: "json",
              datafields: [
                {name: 'RecordID', type: 'string'},
				{name: 'UnitName', type: 'string'},
				{name: 'PositionName', type: 'string'},
                {name: 'RecordType', type: 'string'},
                {name: 'Form', type: 'string'},
                {name: 'RegisterName', type: 'string'},
                {name: 'ResidenceAddress', type: 'string'},
                {name: 'CreateDate', type: 'date'},
				{name: 'Status', type: 'string'},
              ],
              url: dReceive.urlPath + '/data',
              // id: 'ListtypeID',
              // root: 'Rows',
              cache: false,
              filter: function(){
                // update the grid and send a request to the server.
                $(objGrid).jqxGrid('updatebounddata', 'filter');
              },
              sort: function(){
                // update the grid and send a request to the server.
                $(objGrid).jqxGrid('updatebounddata', 'sort');
              },
              root: 'Rows',
              beforeprocessing: function(data){
                source.totalrecords = data[0].TotalRows;
              },
              deleterow: function(rowid, commit) {
                commit(true);
              },

        };
        var dataadapter = new $.jqx.dataAdapter(source, {
              loadError: function(xhr, status, error){
                  alert(error);
              },
              formatData: function (data) {
                $.extend(data, {
                    fromDate: $('form#frmsearch #fromDate').val(),
                    toDate: $('form#frmsearch #toDate').val(),
                });
                return data;
              }
            }
        );

        $(objGrid).on('bindingcomplete', function(event) {
            $(this).jqxGrid('localizestrings', dLayout._CONST.localizationobj);
             $(objGrid).jqxGrid("clearselection");
        }).on("pagesizechanged", function (event){
			
        });   
        $(objGrid).on('rowclick', function(event) {
            if (event.args.rightclick) {
                  $(objGrid).jqxGrid('selectrow', event.args.rowindex);
                  var scrollTop = $(window).scrollTop();
                  var scrollLeft = $(window).scrollLeft();
                  contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
                  return false;
            }
        });

        $(objGrid).on('celldoubleclick', function (event) {
              $(objGrid).jqxGrid('selectrow', event.args.rowindex);
              $('#editrow').trigger('click');
        });

        // initialize jqxGrid
        $(objGrid).jqxGrid({
            source: dataadapter,
            theme: theme,
            width: '100%',
            height: '425',
            autorowheight:true,
            autoheight: true,
            ready: function(){
            },
            rendergridrows: function(obj){
              return obj.data;
            },
            //pagesize: 15,
            enablebrowserselection: true,
            selectionmode: 'multiplerowsextended',
            altrows: true,
			groupable: true,
			groups: ['UnitName'],
            columns: [
                      {text: 'ID', datafield: 'RecordID', width: '3%', hidden: false, viewable: true, editrules: {edithidden: true},cellsalign: 'center',renderer: columnsrenderer},
					  {text: 'Đơn vị', datafield: 'UnitName', width: '8%', cellsalign: 'left',renderer: columnsrenderer},
					  {text: 'Người nhập', datafield: 'PositionName', width: '8%', cellsalign: 'left',renderer: columnsrenderer},
                      {text: 'Loại thủ tục', datafield: 'RecordType', width: '15%', cellsalign: 'left',renderer: columnsrenderer},
                      {text: 'Hình thức', datafield: 'Form', width: '15%', cellsalign: 'left',renderer: columnsrenderer},
                      {text: 'Tên người kê khai', datafield: 'RegisterName', width: '15%', cellsalign: 'left',renderer: columnsrenderer},
                      {text: 'Địa chỉ thường trú', datafield: 'ResidenceAddress', width: '15%',renderer: columnsrenderer},
                      {text: 'Ngày nhập', datafield: 'CreateDate', cellsformat: 'dd-MM-yyyy', width: '10%', cellsalign: 'center',renderer: columnsrenderer},
					  {text: 'Trạng thái', datafield: 'Status', width: '10%', cellsalign: 'left',renderer: columnsrenderer},
                    ]
            });
  });
</script>
